<script setup>
import { ref, reactive, toRaw } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue'
const formRef = ref()
const labelCol = {
  style: {
    width: '180px',
  },
}
const wrapperCol = {
  span: 24,
}
const formState = reactive({
  uploadApk: [],
  title: '',
  banner: [],
  gameVideo: [],
  certificates: [],
  proof: [],
  type: '',
  url: '',
  txt: '',
  resource: '',
  date1: '',
  updateDescription: '',
})
const rules = {
  uploadApk: [
    {
      required: true,
      message: '请上传APK文件',
    },
    {
      validator: (_, value) => {
        if (value.length === 0) {
          return Promise.reject(new Error('请上传APK文件'))
        }
        const file = value[0]
        const isApk =
          file.type === 'application/vnd.android.package-archive' ||
          file.name.endsWith('.apk')
        if (!isApk) {
          return Promise.reject(new Error('只能上传APK文件'))
        }
        const isLt100M = file.size / 1024 / 1024 < 100
        if (!isLt100M) {
          return Promise.reject(new Error('文件大小不能超过100MB'))
        }
        return Promise.resolve()
      },
    },
  ],
  // apkRule: {
  //   validator: (rule, value, callback) => {
  //     if (value.length === 0) {
  //       callback(new Error('请上传APK文件'))
  //     } else {
  //       const file = value[0]
  //       const isApk =
  //         file.type === 'application/vnd.android.package-archive' ||
  //         file.name.endsWith('.apk')
  //       if (!isApk) {
  //         callback(new Error('只能上传APK文件'))
  //       } else {
  //         const isLt100M = file.size / 1024 / 1024 < 100
  //         if (!isLt100M) {
  //           callback(new Error('文件大小不能超过100MB'))
  //         } else {
  //           callback()
  //         }
  //       }
  //     }
  //   },
  // },
  type: [
    {
      required: true,
      message: '选择隐私政策类型并输入内容',
      trigger: 'change',
    },
  ],
  title: [
    {
      required: true,
      message: '请输入20字以内的视频标题',
      trigger: 'change',
    },
    {
      min: 2,
      max: 20,
      message: '长度应该在2到20之间',
      trigger: 'blur',
    },
  ],
  updateDescription: [
    {
      required: true,
      message: '请输入更新说明',
      trigger: 'blur',
    },
  ],
}
const views = () => {
  console.log(111, 'views')
}

const onSave = values => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
    })
    .catch(e => {
      console.log('e: ', e)
    })
  console.log(formState, 1111)
  console.log('Success:', values)
}
const resetForm = () => {
  formRef.value.resetFields()
}
// const handleBeforeUpload2 = file => {
//   // 简单示例，实际逻辑已移至校验规则
//   return true
// }
// const handleBeforeUpload = file => {
//   const isApk =
//     file.type === 'application/vnd.android.package-archive' ||
//     file.name.endsWith('.apk')
//   if (!isApk) {
//     message.error({
//       content: () => '只能上传APK文件！',
//       class: 'custom-class',
//       style: {
//         marginTop: '20vh',
//       },
//     })
//     return false
//   }
//   const isLt100M = file.size / 1024 / 1024 < 100
//   if (!isLt100M) {
//     message.error({
//       content: () => '文件大小不能超过100MB！',
//       class: 'custom-class',
//       style: {
//         marginTop: '20vh',
//       },
//     })
//     return false
//   }
//   return isApk && isLt100M
// }
</script>
<template>
  <div class="app-container">
    <a-row :gutter="24">
      <a-card
        :bordered="false"
        class="box-card"
        title="更新安装包资源"
        headStyle="text-align: center;font-weight: bold;font-size: 20px;border-bottom: none"
      >
        <a-form
          layout="horizontal"
          :model="formState"
          ref="formRef"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-col :span="3" :xs="24">
            <a-form-item label="上传安装包" name="uploadApk">
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.uploadApk"
                  list-type="picture-card"
                  :max-count="1"
                >
                  <div v-if="formState.uploadApk.length < 1">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">上传apk</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  仅支持上传1个apk包（32位、64位或32位/64位兼容包）；
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="视频标题" name="title">
              <a-input
                v-model:value="formState.title"
                allow-clear
                show-count
                :maxlength="20"
                placeholder="请输入20字以内的视频标题"
                style="width: 700px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="封面图">
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.banner"
                  list-type="picture-card"
                  :max-count="1"
                >
                  <div v-if="formState.banner.length < 1">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">点击或拖拽上传</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  ①
                  请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br />
                  ② 支持JPG、PNG格式
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="游戏视屏">
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.gameVideo"
                  list-type="picture-card"
                  :multiple="true"
                  :max-count="5"
                >
                  <div v-if="formState.gameVideo.length < 5">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">点击或拖拽上传</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  ①
                  请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br />
                  ② 支持JPG、PNG格式
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="电子版权证书（选填）">
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.certificates"
                  list-type="picture-card"
                  :multiple="true"
                  :max-count="5"
                >
                  <div v-if="formState.certificates.length < 5">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">点击或拖拽上传</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  若应用已申请电子版权认证，并获得版权证书，可在此上传版权证书。
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="资源证明">
              <div class="upload-container">
                <a-upload
                  v-model:fileList="formState.proof"
                  list-type="picture-card"
                  :multiple="true"
                  :max-count="5"
                >
                  <div v-if="formState.proof.length < 5">
                    <PlusOutlined
                      :style="{
                        fontSize: '32px',
                        color: 'rgba(222, 222, 222, 1)',
                      }"
                    />
                    <div class="margintop18">点击或拖拽上传</div>
                  </div>
                </a-upload>
                <div class="upload-instructions">
                  (支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br />
                  ① 请提供软件著作权扫描件，<a
                    class="upload_tips"
                    href="javascript:;"
                    >快速申请软件著作权；</a
                  ><br />
                  ② 若未申请软件著作权，请下载<a
                    href="javascript:;"
                    class="upload_tips"
                    >开发者声明，</a
                  >填写后提交扫描件；<br />
                  ③ 所有文件上传仅接受JPEG/PNG格式。<br />
                  (若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)<br />
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="隐私政策" name="type">
              <a-radio-group v-model:value="formState.type">
                <a-radio :value="1">
                  输入URL
                  <a-input
                    v-if="formState.type === 1"
                    v-model:value="formState.url"
                    placeholder="请输入URL"
                    style="max-width: 190px"
                    allow-clear
                  />
                </a-radio>
                <a-radio :value="2"
                  >输入文本内容
                  <a-input
                    v-if="formState.type === 2"
                    v-model:value="formState.txt"
                    placeholder="请输入文本内容"
                    style="max-width: 190px; margin-right: 14px"
                    allow-clear
                  />
                </a-radio>
              </a-radio-group>
              <a-space class="icons" @click="views">
                <a-popover title="Title">
                  <template #content>
                    <p>Content</p>
                    <p>Content</p>
                  </template>
                  <QuestionCircleOutlined />
                </a-popover>
                <i style="color: #4cc87e; font-style: normal">查看规范</i>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="发布类型">
              <a-radio-group v-model:value="formState.resource">
                <a-radio :value="1">审核通过后立即发布</a-radio>
                <a-radio :value="2">定时发布</a-radio>
              </a-radio-group>
              <a-time-picker
                v-if="formState.resource === 2"
                v-model:value="formState.date1"
              />
            </a-form-item>
          </a-col>
          <a-col :span="3" :xs="24">
            <a-form-item label="更新说明" name="updateDescription">
              <a-textarea
                v-model:value="formState.updateDescription"
                allow-clear
                :rows="4"
                placeholder="请输入更新说明"
                style="width: 700px"
              />
            </a-form-item>
          </a-col>
          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button
              htmlType="submit"
              style="
                margin-right: 16px;
                background-color: rgba(76, 200, 126, 1);
              "
              type="primary"
              @click="onSave"
              >保存并提交</a-button
            >
            <a-button style="margin-left: 8px" @click="resetForm"
              >取消保存</a-button
            >
          </a-form-item>
        </a-form>
      </a-card>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  // padding: 15px;
  padding: 0 14px;
  // background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  // border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper) {
  width: auto;
}
.upload-instructions {
  // flex: 1;
  margin-left: 15px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left: 140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin24 {
  margin-right: 24px;
}
.margintop18 {
  margin-top: 18px;
  font-weight: 400;
  font-size: 12px;
  color: #cccccc;
  line-height: 20px;
  text-align: left;
}
.icons {
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.footer_content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload_tips {
  color: #4cc87e;
}
</style>
